<template>
	<view class="content">
		<view class="example">
			<overhaul-step :bidding="isBidding" :active="active" />
			<view class="buttn">
				<button type="primary" @click="submitData">提交</button>
			</view>
		</view>
		<view class="criter_bt">
			<view class="line"></view>
			<text>基本信息</text>
		</view>
		<view class="dec_main">
			<view class="dec_li dush_li">
				<view class="dec_le">
					<label>申请人员：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.create_user}}</text>
				</view>
			</view>
			<view class="dec_li dush_li">
				<view class="dec_le">
					<label>所属部门：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.apply_dept_name}}</text>
				</view>
			</view>
			<view class="dec_li">
				<view class="dec_le">
					<label>申报时间：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.create_date}}</text>
				</view>
			</view>
		</view>
		<view class="criter_bt">
			<view class="line"></view>
			<text>检修信息</text>
		</view>
		<view class="dec_main">
			<view class="dec_li dec_flex">
				<view class="dec_le">
					<label>*检修装置：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.equipment_name}}</text>
				</view>
			</view>
			<view class="dec_li dec_flex">
				<view class="dec_le">
					<label>*检修设备：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.device_name}}</text>
				</view>
			</view>
			<view class="dec_li dec_flex">
				<view class="dec_le">
					<label>*设备位号：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.device_no}}</text>
				</view>
			</view>
			<view class="dec_li dec_flex">
				<view class="dec_le">
					<label>*工时：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.work_hours}}</text>
				</view>
			</view>
			<view class="dec_li ">
				<view class="dec_le">
					<label>*拍照取证：</label>
				</view>
				<view class="dec_ri">
					<view class="pic-view">
						<view style="width: 70%; display: flex;" >
							<view v-for="(jtem, j) in jsonData.info_pics" :key = "j" style="margin: 10rpx;">
								<image  :src="fileUrl + jtem.pic_url" class="detail_img" @click="previewImg(jsonData.info_pics, j)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="dec_li">
				<view class="dec_le">
					<label>*检修内容：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.check_content}}</text>
				</view>
			</view>
		</view>
		
		<!-- 检修认定 -->
		<view v-if="planlist.length > 0">
			<view class="criter_bt">
				<view class="line"></view>
				<text>检修认定</text>
			</view>
			<view>
				<view class="dec_li dec_flex">
					<view class="dec_le">
						<label>*负责部门：</label>
					</view>
					<view class="dec_ri">
						<text>{{planlist[0].major_dept}}</text>
					</view>
				</view>
				<view class="dec_li dec_flex">
					<view class="dec_le">
						<label>*主修人：</label>
					</view>
					<view class="dec_ri">
						<text>{{planlist[planlist.length - 1].major_name}}</text>
					</view>
				</view>
				<view class="dec_li dec_flex">
					<view class="dec_le">
						<label>*签名：</label>
					</view>
					<view class="dec_ri">
						<view class="sign-view" >
							<image v-if="planlist[planlist.length - 1].major_sign" 
							:src="fileUrl + planlist[planlist.length - 1].major_sign" 
							@click="previewSign(planlist[planlist.length - 1].major_sign)"></image>
						</view>
					</view>
				</view>
				
				<view class="dec_li dec_flex">
					<view class="dec_le">
						<label>*检修人：</label>
					</view>
					<view class="dec_ri">
						<text>{{planlist[planlist.length - 1].cooperate_user}}</text>
					</view>
				</view>
				<view class="dec_li dec_flex">
					<view class="dec_le">
						<label>*计划开始时间：</label>
					</view>
					<view class="dec_ri">
						<text>{{planlist[planlist.length - 1].plan_begin_date}}</text>
					</view>
				</view>
				<view class="dec_li dec_flex">
					<view class="dec_le">
						<label>*认定描述：</label>
					</view>
					<view class="dec_ri">
						<text>{{planlist[planlist.length - 1].confirm_desc}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 检修确认 -->
		<view v-if="confirmlist.length > 0">
			<view class="criter_bt">
				<view class="line"></view>
				<text>检修确认</text>
			</view>
			<view>
				<view class="dec_li dec_flex">
					<view class="dec_le">
						<label>*主修人：</label>
					</view>
					<view class="dec_ri">
						<text>{{confirmlist[confirmlist.length - 1].major_name}}</text>
					</view>
				</view>
				<view class="dec_li dec_flex">
					<view class="dec_le">
						<label>*签名确认：</label>
					</view>
					<view class="dec_ri">
						<view class="sign-view" >
							<image v-if="confirmlist[confirmlist.length - 1].major_sign" 
							:src="fileUrl + confirmlist[confirmlist.length - 1].major_sign" 
							@click="previewSign(confirmlist[confirmlist.length - 1].major_sign)"></image>
						</view>
					</view>
				</view>
				<view class="dec_li dec_flex">
					<view class="dec_le">
						<label>*工艺班长：</label>
					</view>
					<view class="dec_ri">
						<text>{{jsonData.create_user}}</text>
					</view>
				</view>
				<view class="dec_li dec_flex">
					<view class="dec_le">
						<label>*签名确认：</label>
					</view>
					<view class="dec_ri">
						<view class="sign-view" >
							<image v-if="confirmlist[confirmlist.length - 1].monitor_sign" 
							:src="fileUrl + confirmlist[confirmlist.length - 1].monitor_sign" 
							@click="previewSign(confirmlist[confirmlist.length - 1].monitor_sign)"></image>
						</view>
					</view>
				</view>
				<view class="dec_li dec_flex">
					<view class="dec_le">
						<label>*许可检修时间：</label>
					</view>
					<view class="dec_ri">
						<text>{{confirmlist[confirmlist.length - 1].permission_date}}</text>
					</view>
				</view>
				<view class="criter_bt">
					<view class="line"></view>
					<text>安全措施</text>
				</view>
				
				<view class="cfg-item" v-for="(item, i) in confirmlist[confirmlist.length - 1].checklist" :key="i">
					<view class="cfg-title">风险分析</view>
					<view class="cfg-content">{{item.RISK_DESC}}</view>
					<view class="cfg-title">安全措施</view>
					<view class="cfg-content">{{item.SAFE_MEASURE}}</view>
					<view >
						<text style="color: #0081FF;" v-if="item.RESULT == 1">是</text>
						<text style="color: #ED1C24;" v-if="item.RESULT == 2">否</text>
						<text style="color: #6A6A6A;" v-if="item.RESULT == 3">不涉及</text>
					</view>
				</view>
				
				<view class="dec_li dec_flex">
					<view class="dec_le">
						<label>补充措施：</label>
					</view>
					<view class="dec_ri">
						<text>{{confirmlist[confirmlist.length - 1].supplement_desc}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 检修处理 -->
		<view v-if="handlelist.length > 0">
			<view class="criter_bt">
				<view class="line"></view>
				<text>检修处理</text>
			</view>
			
			<view>
				<view class="dec_li dec_flex">
					<view class="dec_le">
						<label>*主修人：</label>
					</view>
					<view class="dec_ri">
						<text>{{handlelist[handlelist.length - 1].major_name}}</text>
					</view>
				</view>
				<view class="dec_li dec_flex">
					<view class="dec_le">
						<label>*签名确认：</label>
					</view>
					<view class="dec_ri">
						<view class="sign-view" >
							<image v-if="handlelist[handlelist.length - 1].major_sign" 
							:src="fileUrl + handlelist[handlelist.length - 1].major_sign" 
							@click="previewSign(handlelist[handlelist.length - 1].major_sign)"></image>
						</view>
					</view>
				</view>
				<view class="dec_li dec_flex">
					<view class="dec_le">
						<label>*配合人：</label>
					</view>
					<view class="dec_ri">
						<text>{{handlelist[handlelist.length - 1].cooperate_user}}</text>
					</view>
				</view>
				<view class="dec_li dec_flex">
					<view class="dec_le">
						<label>*签名确认：</label>
					</view>
					<view class="dec_ri">
						<view class="sign-view" >
							<image v-if="handlelist[handlelist.length - 1].user_sign" 
							:src="fileUrl + handlelist[handlelist.length - 1].user_sign" 
							@click="previewSign(handlelist[handlelist.length - 1].user_sign)"></image>
						</view>
					</view>
				</view>
				<view class="dec_li dec_flex">
					<view class="dec_le">
						<label>*终止时间：</label>
					</view>
					<view class="dec_ri">
						<text>{{handlelist[handlelist.length - 1].overhaul_date}}</text>
					</view>
				</view>
				
				<view class="dec_li ">
					<view class="dec_le">
						<label>*拍照取证：</label>
					</view>
					<view class="dec_ri">
						<view class="pic-view">
							<view style="width: 70%; display: flex;" >
								<view v-for="(jtem, j) in handlelist[handlelist.length - 1].handle_pics" :key = "j" style="margin: 10rpx;">
									<image  :src="fileUrl + jtem.pic_url" class="detail_img" @click="previewImg(handlelist[handlelist.length - 1].handle_pics, j)"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="dec_li">
					<view class="dec_le">
						<label>*终止原因：</label>
					</view>
					<view class="dec_ri">
						<text>{{handlelist[handlelist.length - 1].handle_desc}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 最终验收 -->
		<view>
			<view class="criter_bt">
				<view class="line"></view>
				<text>终止审核</text>
			</view>
			
			<view class="dec_li dush_li ">
				<view class="dec_le">
					<label>*终止审核：</label>
				</view>
				<view class="dec_ri">
					<radio-group @change="radioChange" >
						<label>
							<radio value="r1" color="#267DFF" checked="true" style=" transform:scale(0.8)"/><text style="margin-left: 10rpx;">通过</text>
						</label>
						<label>
							<radio value="r2" color="#267DFF" style=" transform:scale(0.8)" /><text style="margin-left: 10rpx;">驳回</text>
						</label>
					
					</radio-group>
				</view>
			</view>
			
			<view class="dec_li dush_li">
				<view class="dec_le">
					<label >处理描述：</label>
				</view>
				<view class="dec_ri">
					<uni-easyinput type="textarea" v-model="desc" placeholder="请描述,200字以内"></uni-easyinput>
				</view>
			</view>
			
		</view>
		<helang-compress ref="helangCompress"></helang-compress>
	</view>
</template>

<script>
	import OverhaulStep from '@/components/selfs/OverhaulStep.vue'
	import Signature from '@/components/sin-signature/sin-signature.vue'
	import {getFormatDateTime} from '@/utils/date-util.js'
	import {svg2Png} from '@/utils/base64.js'
	import helangCompress from '@/components/helang-compress/helang-compressTwo';
	import {FILE_URL, doSuspendAudit, uploadBase64Img, getOverhaulInfo} from '@/api/maintenance/selfs.js'
	export default {
		components: {
			OverhaulStep,
			Signature,
			helangCompress
		},
		data() {
			return {
				isBidding: false,
				active: 4,
				userName: '',
				userId: '',
				deptName: '',
				deptId: '',
				signStr: '',
				signPng: '',
				signStr2: '',
				signPng2: '',
				now: '',
				acceptDate: '',
				fileUrl: FILE_URL,
				desc: '',
				result: 7,
				imgPaths: [],
				overhaul_id: '',
				jsonData: {},
				// 认定
				planlist: [],
				// 确认
				confirmlist: [],
				handlelist: []
			}
		},
		methods: {
			dateChange(e) {
				this.permissionDate = e.detail.value
			},
			radioChange: function(evt, i) {
				console.log(evt.detail.value)
				if('r1' === evt.detail.value) {
					this.result = 7
				} else {
					this.result = 8
				}
			},
			
			picSelect(e){
				this.batchCompress(e.tempFilePaths)
			},
			picDelete(e){
				console.log('DELETE', e)
				this.deletePic(e.tempFile.path)
			},
			// 批量压缩
			batchCompress(paths) {
				this.$refs.helangCompress.batchCompress({
					batchSrc: paths,
					maxSize: 500,
					fileType: 'png',
					quality: 0.4,
					minSize: 180,
					progress: (res) => {
						uni.showLoading({
							title: `进度:${res.done+res.fail}/${res.count}`
						})
						console.log(res);
					}
				}).then((res) => {
					uni.hideLoading();
					uni.showToast({
						title: "压缩完成",
						icon: "success"
					})
					this.uploadImg(res, paths)
				}).catch((err) => {
					uni.hideLoading();
					uni.showToast({
						title: "压缩失败" + err,
						icon: "none"
					})
				})
			},
			uploadImg(base64Pics, paths) {
				let imgs = []
				for(let i = 0; i < base64Pics.length; i ++) {
					imgs.push({img: base64Pics[i].slice(22)})
				}
				let json = JSON.stringify(imgs)
				let params = {data: json}
				uploadBase64Img(params).then(res => {
					console.log('UPLOAD', res)
					let json = res.datas
					for(let j = 0; j < json.length; j ++) {
						this.imgPaths.push({path: paths[j], pic_url: json[j].new_file_url})
					}
				})
			},
			deletePic(path) {
				for(let i = 0; i < this.imgPaths.length; i ++) {
					if(path == this.imgPaths[i].path) {
						this.imgPaths.splice(i, 1)
						return
					}
				}
			},
			
			previewImg(imgs, index) {
				let pics = []
				for (let i = 0; i < imgs.length; i ++) {
					pics[i] = this.fileUrl + imgs[i].pic_url
					console.log('PREVIEW', pics[i])
				}
				uni.previewImage({
					urls: pics,
					current: index
				});
			},
			
			previewSign(sign) {
				let imgs = []
				console.log('SIGN', sign)
				imgs.push(this.fileUrl + sign)
				console.log('SIGN', imgs)
				uni.previewImage({
					urls: imgs
				});
			},
			
			async startSign() {
				let s = await this.$refs.sig.getSyncSignature();
				svg2Png(s, (e)=> {
					this.signPng = e
					console.log('签名数据', this.signPng);
				})
				
			},
			
			async startSign2() {
				let s = await this.$refs.sig2.getSyncSignature();
				svg2Png(s, (e)=> {
					this.signPng2 = e
					console.log('签名数据2', this.signPng2);
				})
				
			},
			
			fetchDetailData() {
				let params = {overhaul_id: this.overhaul_id}
				uni.showLoading({
					title: '正在查询...'
				})
				getOverhaulInfo(params).then(res => {
					this.jsonData = res.datas
					this.planlist = this.jsonData.planlist
					this.confirmlist = this.jsonData.confirmlist
					this.handlelist = this.jsonData.handlelist
				})
			},
			
			submitData() {
				
				let params = {
					plan_id: this.plan_id, overhaul_id: this.overhaul_id,
					user_id: this.userId, handle_type: this.result,
					handle_desc: this.desc
				}
				uni.showLoading({
					title: '正在提交'
				})
				doSuspendAudit(params).then(res=> {
					uni.$emit('examine_refresh')
					uni.showToast({
						title: '提交成功',
						icon: 'success',
						duration: 1500
					})
					setTimeout(function() {
						uni.navigateBack({
						})
					}, 500)
				})
			}
		},
		onLoad:function(e){
			this.type = e.type
			this.userName = e.userName
			this.userId = e.userId
			this.deptName = e.deptName
			this.deptId = e.deptId
			this.overhaul_id = e.overhaul_id
			this.plan_id = e.plan_id
			this.fetchDetailData()
			this.now = getFormatDateTime()
			this.acceptDate = getFormatDateTime()
			this.isBidding = (e.is_bidding == 1)
		}
	}
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff
	}
	view {
		font-size: 28upx;
		line-height: inherit
	}
	.content{
		width: 100%;
		margin: 0 auto 80upx;
	}
	.example {
		width: 91%;
		margin: 20upx auto 20upx;
		padding: 0 30upx 0upx
	}
	.example-body {
		padding: 0 40upx
	}
.buttn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 5;
		padding: 20rpx;
		display: flex;
		justify-content: center;
		background-color: #FFF;
		
	}

	.buttn button {
		font-size: 30upx;
		background: #267dff;
		border-radius: 0;
		flex: 1;
		border-radius: 8rpx;
	}
	.criter_bt{
		padding: 0 10px;
		height: 50px;
		background-color: #f7f7f7;
		font-weight: normal;
		display: flex;
		align-items: center;
		flex-direction: row;
	}
	.line{
		width: 8upx;
		height: 30upx;
		background: #267DFF;
		border-radius: 10upx;
		display: inline-block;
		vertical-align: middle;
	}
	.criter_bt text{
		padding-left: 10upx;
		vertical-align: middle;
		font-size: 32upx;
		color: #333333;
	}
	.dec_main{
		width: 94%;
	}
	.dec_li{
		width: 96%;
		margin: 30rpx  20rpx ;
		overflow: hidden;
	}
	.dush_li{
		border-bottom: 1upx solid #f4f4f4;
		padding-bottom: 20upx;
	}
	.dec_le{
		width: 30%;
		float: left;
	}
	.dec_ri{
		float: left;
		width: 70%;
	}
	.dec_flex{
		min-height: 60rpx;
		display: flex;
		align-items: center;
	}
	
	.dec_li label{
		color: #267DFF;
		font-size: 30upx;
	}
	.dec_li text{
		color: #666666;
		font-size: 30upx;
	}
	.dec_li .inppu{
		font-size: 30upx;
	}
	.sign-view {
		display: flex;
		align-items: center;
	}
	.sign-view image {
		width: 150rpx;
		height: 60rpx;
		border: #d4ced8 solid 1rpx;
		border-radius: 5rpx;
		margin-right: 30rpx;
	}
	.sign-view text {
		width: 150rpx;
		height: 60rpx;
		border: #267DFF solid 1rpx;
		border-radius: 5rpx;
		color: #267DFF;
		font-size: 45rpx;
		text-align: center;
	}
	.signture {
		width: 0;
		height: 0;
	}
	.m-picker {
		margin-left: -25rpx;
	}
	.bottom-view {
		height: 100rpx;
		display: flex;
		align-items: center;
	}
	.detail_img {
		width: 150rpx;
		height: 150rpx;
		border: #f4f4f4 solid 1rpx;
	}
	.pic-view {
		display: flex;
		align-items: center;
	}
	.cfg-item {
		padding: 20rpx;
		border-bottom: 1upx solid #f4f4f4;
	}
	.cfg-title {
		font-size: 32rpx;
		color: #267DFF;
	}
	.cfg-content {
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}
</style>
